<template>
	<view>
	
		<!-- 轮播图 -->
		<Swiper :swiperData='swiperData'></Swiper>
		<!-- //二级菜单？ -->
		<GoToMenu :goToMenuData ='goToMenuData'></GoToMenu>
		<!-- 推荐歌单 -->
		<SongList :songListData='songListData'></SongList>
		<!-- 排行榜 -->
		<TopList :topListData='topListData'></TopList>
		<button type="default" @click="listen">123</button>
		<text>\n</text>
		<text>\n</text>
		<text>\n</text>
		<text>\n</text>
		<text>\n</text>
		<text>\n</text>
		<!-- // 底部播放器 -->
		<view class="zaudio" v-show="paused !== true ">
			<my-zaudio theme="theme3" ref='a'></my-zaudio>
		</view>
		
		<!-- 头部输入框 -->
		<view class="header">
		<Header>
			<view class="headerInput" @click="gotoSearch">
				<uni-easyinput  v-model="imputData" placeholder="处处稳" />
			</view>
		</Header>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import Header from '../home/comments/Header.vue'
	import Swiper from './comments/swiper.vue'
	import GoToMenu from './comments/goToMenu.vue'
	import SongList from './comments/songList.vue'
	import TopList from './comments/topList.vue'
	export default {
		components:{
			Header,
			Swiper,
			GoToMenu,
			SongList,
			TopList,
		},
		data() {
			return {
				// 搜索输入框数据
				imputData:'',
				// 轮播图数据
				swiperData:[],
				// 二级菜单数据
				goToMenuData:[],
				// 推荐歌单数据
				songListData:[],
				//排行榜数据
				topListData:[],
				// ui初始化数据
				data1: [
				  {
				    src:
				      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2016aJan/18X/18d_DeH/01.mp3",
				    title: "恭喜发财",
				    singer: "刘德华",
				    coverImgUrl:
				      "https://img.1ting.com/images/special/75/s150_f84ef5082b0420f74cd2546b986ab0fc.jpg",
				  },
				  {
				    src:
				      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2015kNov/25X/25m_XiaoQ/03.mp3",
				    title: "好运来",
				    singer: "作者1111",
				    coverImgUrl:
				      "https://img.1ting.com/images/special/204/s150_77254cd4a4da1a33b8faf89c4cbf6e40.jpg",
				  },
				],
				FM:[]
			}
		},
		created() {
			this.getSwiperData()
			this.getGoToMenu()
			this.getSongListData()
		},
		methods: {
			// listen(){
			// 	this.$zaudio.setAudio(this.data1)
			// 	this.$zaudio.setRender(0)
			// 	this.$refs.a.operate()
			// },
			
			// 获取轮播图数据
			async getSwiperData(){
				const res = await this.$request({
					url:'/banner',
					
				})
				if (res.data.code !== 200){
					return uni.showToast({
							title: '获取轮播图数据失败',
							icon: 'error'
						})
				}else{
					this.swiperData = res.data.banners
					// console.log(res)
				}
				
			},
			// 获取二级菜单数据
			async getGoToMenu(){
				const res = await this.$request({
					url:'/homepage/dragon/ball'
				})
				if(res.data.code !== 200){
					return uni.showToast({
							title: '获取二级菜单数据失败',
							icon: 'error'
						})
				}else{
					this.goToMenuData = res.data.data
					// console.log(this.goToMenuData)
				}
			},
			// 获取歌单列表
			async getSongListData(){
				const {data:res} = await this.$request({
					url:'/personalized',
					data:{
						limit:6,
						}
				})
				console.log(res)
				if(res.code === 200){
					this.songListData = res.result
				}
			},
			gotoSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		
		
		},
		computed:{
			...mapGetters(['audiolist', 'playinfo', 'paused'])
		}
	}
</script>

<style scoped>
.headerInput{
	width: 80%;
}

.header{
	background-color: #ffffff;
	position: fixed;
	   top: calc( var(--window-top));
		width: 100%;
		height: 100upx;
		
}

</style>
